import React, { useEffect, useState } from 'react';
import './setPending.scss'
import { Button, Form, Input, Select, DatePicker, Table} from 'antd';
import { getSetPendingList,SerchSignPendingList } from '../../../api/Signing'
import Header from '../../../component/WFL/header'
import {NavLink, useNavigate} from 'react-router-dom'
interface Props{

}
function SignPending(props:Props) {
    var navigate = useNavigate()
    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const { Search } = Input;
    const [data, setData] = useState([])
    const [selectedRowKeys,setSelectedRowKeys] = useState([])
    var [pagination,setPagination] = useState({ current:1,pageSize:5});
    const [checkStrictly, setCheckStrictly] = useState(false);
    //搜索
    var [isSign, setIsSign] = useState('')
    var [organization, setOrganization] = useState('')
    var [doctorTeam, setDoctorTeam] = useState('')
    var [server, setServer] = useState('')
    var [name, setName] = useState('')
    var [date, setDate] = useState('')



    //初始化加载
    useEffect(() => {
        getSetPendingList().then((res: any) => {
            var newarr = res.data.filter((item: any) => { return item.isSign === "待审核" || item.isSign === "已驳回" || item.isSign === "待服务" })
            setData(newarr)
        })
    }, [])
    //表单验证通过提交
    const onFinish = async (values: any) => {
        console.log(values);
    };
    

    //点击搜索
    const onSearch =async (value: string) => {
        setName(value)
        var res = await SerchSignPendingList({isSign_like:isSign,organization_like:organization,doctorTeam_like:doctorTeam,server_like:server,name_like:value,date_like:date})
        setData(res.data)
    };


    //下拉搜索对应数据
    //签约状态
    var onIsSignChange=async(str: string, value: any)=>{
        setIsSign(value)
        var res = await SerchSignPendingList({isSign_like:value,organization_like:organization,doctorTeam_like:doctorTeam,server_like:server,name_like:name,date_like:date})
        setData(res.data)
    }

    //签约机构
    var onOrganizationChange= async(str: string, value: any)=>{
        setOrganization(value)
        var res = await SerchSignPendingList({isSign_like:isSign,organization_like:value,doctorTeam_like:doctorTeam,server_like:server,name_like:name,date_like:date})
        setData(res.data)
    }

    //医生团队
    var onDoctorTeamChange= async(str: string, value: any)=>{
        setDoctorTeam(value)
        var res = await SerchSignPendingList({isSign_like:isSign,organization_like:organization,doctorTeam_like:value,server_like:server,name_like:name,date_like:date})
        setData(res.data)
    }
    //服务包
    var onServerChange= async(str: string, value: any)=>{
        setServer(value)
        var res = await SerchSignPendingList({ isSign_like:isSign,organization_like:organization,doctorTeam_like:doctorTeam,server_like:value,name_like:name,date_like:date})
        setData(res.data)
    }
    

    //日期
    var onDateChange= async (str:string,value:any)=>{
        setDate(value)
        var res = await SerchSignPendingList({ isSign_like:isSign,organization_like:organization,doctorTeam_like:doctorTeam,server_like:server,name_like:name,date_like:value})
        setData(res.data)
         
    }
    //表格列数据
    const columns: any = [
        { title: '编号', dataIndex: 'id', },
        { title: '签约人姓名', dataIndex: 'name', },
        {title: '身份证号',dataIndex: 'id-num',},
        {title: '手机号码',dataIndex: 'phone',},
        {title: '签约状态',
        dataIndex: 'isSign',
        render:(isSign:string)=><span style={{color:isSign==="待支付"?"#FDDB78":''||isSign==="已驳回"?"#FA746B":""||isSign==="待审核"?"#3DD4A7":""}}>{isSign}</span>
    },
        {title: '签约医生团队',dataIndex: 'doctorTeam',},
        {title: '最后修改时间',dataIndex: 'date',},
        {title: '操作',
            render: (id:any) => {
                return (<>
                <NavLink to="/index/sign-detail" state={id}>查看详情</NavLink>
                <NavLink to="/index/sign-edit" state={id}>编辑</NavLink>
                </>)
            }
        },
    ];
    //全选单选
    const rowSelection = {
        onChange: (selectedRowKeys:any, selectedRows:any) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        onSelect: (record:any, selected:any, selectedRows:any) => {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: (selected:any, selectedRows:any, changeRows:any) => {
          console.log(selected, selectedRows, changeRows);
        },
      };

    //分页发生改变后执行,pagi是最新的页码数据,是个对象 current:1,pageSize:5,total:100 },拿到最新的对象再去发请求
    const handleChange = (pagi:any)=>{
        setPagination(pagi) //更新页码
    }

    
    return (
        <div className='signPending'>
            <div className="main">
                <Header txt="待处理签约"></Header>
                <div className="inputbox">
                    <Form
                        name="basic"
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >

                        <div className='input-line'>
                            <div>
                                <Form.Item
                                    label="签约状态"
                                    name="isSign"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                        onChange={(value)=>{onIsSignChange('isSign',value)}}
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="待审核">待审核</Option>
                                        <Option value="待支付">待支付</Option>
                                        <Option value="已驳回">已驳回</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="签约机构"
                                    name="organization"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                        onChange={(value)=>{onOrganizationChange('organization',value)}}
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="罗西社区服务中心">罗西社区服务中心</Option>
                                        <Option value="天明社区服务中心">天明社区服务中心</Option>
                                        <Option value="民进社区服务中心">民进社区服务中心</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="医生团队"
                                    name="doctorTeam"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                        onChange={(value)=>{onDoctorTeamChange('doctor',value)}}
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="王皓团队">王皓团队</Option>
                                        <Option value="胡曼团队">胡曼团队</Option>
                                        <Option value="李维团队">李维团队</Option>
                                    </Select>
                                </Form.Item>
                            </div>

                            <Button>导出</Button>
                        </div>


                        <div className='input-line'>
                            <div>
                                <Form.Item
                                    label="服务包"
                                    name="server"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                        onChange={(value)=>{onServerChange('server',value)}}
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="基础包">基础包</Option>
                                        <Option value="老年人服务包">老年人服务包</Option>
                                        <Option value="慢性病护理包">慢性病护理包</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="选择日期"
                                    name="date"
                                    className='date'
                                >
                                    <RangePicker placeholder={["开始日期", "结束日期"]}  onChange={(value)=>{onDateChange('date',value)}}/>
                                </Form.Item>
                            </div>

                            <Search placeholder="请输入关键字" onSearch={onSearch} enterButton />
                        </div>
                    </Form>

                </div>
                <div className="table">
                
                    <Table columns={columns} dataSource={data} rowSelection={{ ...rowSelection, checkStrictly }} pagination={pagination}     onChange={(pagi)=>{handleChange(pagi)}} rowKey={(record:any) => record.id}/>
                </div>
            </div>
        </div>
    );
}


export default SignPending;